<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <title>钱包流水记录</title>
    <!--top信息-->
    <link rel="icon" href="static/images/favicon.ico" type="image/ico">
    <div th:replace="public/pc :: top"></div>
</head>

<body>
<div class="lyear-layout-web">
    <div class="lyear-layout-container">
        <!--左侧导航-->
        <div th:replace="public/pc :: navigation"></div>
        <!--End 左侧导航-->

        <!--头部信息-->
        <div th:replace="public/pc :: head"></div>
        <!--End 头部信息-->

        <!--页面主要内容-->
        <main class="lyear-layout-content">

            <div class="container-fluid">

                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-body">
                                <form class="form-inline" action="" method="post"
                                      onsubmit="return false;">
                                    <div class="form-group">
                                        用户id：
                                        <input class="form-control" type="text" id="userId" style="width: 110px"
                                               name="example-if-password" placeholder="请输入用户id">
                                        订单id：
                                        <input class="form-control" type="text" id="orderId"
                                               name="example-if-password" placeholder="请输入订单编号">
                                        类型：
                                        <input class="form-control" type="text" id="type" style="width: 110px"
                                               name="example-if-password" placeholder="请输入类型">
                                        创建时间：
                                        <div class="input-daterange input-group js-datepicker" data-auto-close="false"
                                             data-format="YYYY-MM-DD HH:mm:ss">
                                            <input class="form-control" type="text" id="beginTime" style="width: 100px"
                                                   name="example-daterange1" placeholder="从">
                                            <span class="input-group-addon"><i class="mdi mdi-chevron-right"></i></span>
                                            <input class="form-control" type="text" id="endTime" style="width: 100px"
                                                   name="example-daterange2" placeholder="至">
                                        </div>
                                        备注：
                                        <input class="form-control" type="text" id="remark"
                                               name="example-if-password" placeholder="请输入备注">
                                    </div>
                                    <div class="form-group">
                                        <button class="btn btn-success" type="submit" id="flushed">查询</button>
                                    </div>
                                </form>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-bordered">
                                        <thead>
                                        <tr>
                                            <th>编号</th>
                                            <th>用户编号</th>
                                            <th>变动金额</th>
                                            <th>变动后金额</th>
                                            <th>订单编号</th>
                                            <th>类型</th>
                                            <th>创建时间</th>
                                            <th>备注</th>
                                            <th>操作</th>
                                        </tr>
                                        </thead>
                                        <tbody id="categoryInfoBody">
                                        <!--                                        此处展示相关数据-->
                                        </tbody>
                                    </table>
                                </div>
                                <ul class="pagination" id="paginatedInfo">
                                    <!--                                    展示分页导航-->
                                </ul>

                            </div>
                        </div>
                    </div>

                </div>

            </div>

        </main>
        <!--End 页面主要内容-->
    </div>
</div>

<script type="text/javascript" src="static/js/jquery.min.js"></script>
<script type="text/javascript" src="static/js/bootstrap.min.js"></script>
<script type="text/javascript" src="static/js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="static/js/main.min.js"></script>
<!--对话框-->
<script type="text/javascript" src="static/js/jconfirm/jquery-confirm.min.js"></script>
<!--消息提示-->
<script type="text/javascript" src="static/js/bootstrap-notify.min.js"></script>
<script type="text/javascript" src="static/js/lightyear.js"></script>
<!--时间选择插件-->
<script src="static/js/bootstrap-datetimepicker/moment.min.js"></script>
<script src="static/js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></script>
<script src="static/js/bootstrap-datetimepicker/locale/zh-cn.js"></script>
<!--日期选择插件-->
<script src="static/js/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
<script src="static/js/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>

<script type="text/javascript">
    $(function () {
        $('.search-bar .dropdown-menu a').click(function () {
            var field = $(this).data('field') || '';
            $('#search-field').val(field);
            $('#search-btn').html($(this).text() + ' <span class="caret"></span>');
        });
    });

    // 全局变量
    let pageNum = 1, pageSize = 10;

    // 获取参数并查询
    function getUserPriseRecords() {
        let userId = $("#userId").val();
        let orderId = $("#orderId").val();
        let type = $("#type").val();
        let createTime = $("#createTime").val();
        let remark = $("#remark").val();
        getUserPriseRecordsInfo(userId, orderId, type, createTime, remark);
    }

    // 共用的查询 function
    function getUserPriseRecordsInfo(userId, orderId, type, createTime, remark) {
        lightyear.loading('show');
        let ghtml = "";
        $.ajax({
            type: "post",
            url: "/userPriseRecords/getUserPriseRecords",
            data: {
                pageNum: pageNum,
                pageSize: pageSize,
                userId: userId,
                orderId: orderId,
                type: type,
                remark: remark
            },
            dataType: "json",
            success: function (data) {
                lightyear.loading('hide');
                console.log(data);
                if (null != data.data) {
                    // 填充数据
                    $.each(data.data.result, function (i, item) {
                        // alert(item)
                        ghtml += "<tr>";
                        // 添加数据信息
                        ghtml += "<td>" + item.id + "</td>";
                        ghtml += "<td>" + item.userId + "</td>";
                        ghtml += "<td>" + item.amount + "</td>";
                        ghtml += "<td>" + item.afterAmount + "</td>";
                        ghtml += "<td>" + item.orderId + "</td>";
                        ghtml += "<td>" + item.type + "</td>";
                        ghtml += "<td>" + item.createTime + "</td>";
                        ghtml += "<td>" + item.remark + "</td>";
                        ghtml += '<td><div class="btn-group">' +
                            '<a class ="btn btn-cyan" title="编辑" data-toggle="tooltip" onclick="editCategory(' + item.categoryId + ', `' + item.categoryName + '`)"><i class ="mdi mdi-pencil">编辑</i></a>';
                        // '<a class ="btn btn-xs btn-default" title="查看" data-toggle="tooltip"><i class ="mdi mdi-eye"></i></a>' +
                        if (item.status === 0) {
                            ghtml += '<a class ="btn btn-danger" title="停用" data-toggle="tooltip" onclick="stopCategory(' + item.categoryId + ')"><i class ="mdi mdi-window-close">停用</i></a>';
                        } else {
                            ghtml += '<a class ="btn btn-success" title="启用" data-toggle="tooltip" onclick="enableCategory(' + item.categoryId + ')"><i class ="mdi mdi-check">启用</i></a>';
                        }
                        ghtml += '</div></td>';
                        ghtml += '</tr>';
                    })
                    $("#categoryInfoBody").html(ghtml); // 添加数据
                    // 保存分页信息
                    pageNum = data.data.pageNum;
                    pageSize = data.data.pageSize;
                    // 调用分页方法
                    paginated(pageNum, data.data.pages, pageSize, data.data.total);
                }
            },
            error: function (data) {
                lightyear.loading('hide');
                console.log(data);
                lightyear.notify("服务器错误，请联系管理员！", 'danger', 100);
            }
        })
    }

    // 查询分页页面
    function getPaginated(num, size) {
        // 保存分页信息
        pageNum = num;
        pageSize = size;
        getUserPriseRecords();
    }

    // 分页导航
    function paginated(pageNum, pages, pageSize, total) {
        // 计算需要显示的页面
        let begin = 1 >= (pageNum - 4) ? 1 : (pageNum - 4);
        let end;
        if (pageNum < 4) {
            end = pages < 8 ? pages : 8;
        } else {
            end = pages < (pageNum + 4) ? pages : (pageNum + 4);
        }

        let ghtml = '';
        if (pageNum === 1) {
            ghtml += '<li class="disabled"><span>«</span></li>'
        } else {
            ghtml += '<li><a href="#1" onclick="getPaginated(' + 1 + ',' + pageSize + ')"> » </a></li>'
        }
        for (let i = begin; i < end; i++) {
            if (pageNum === i) {
                ghtml += '<li class="active"><span>' + i + '</span></li>'
            } else {
                ghtml += '<li><a href="#1" onclick="getPaginated(' + i + ',' + pageSize + ')">' + i + '</a></li>'
            }
        }
        if (pages > pageNum + 8) {
            ghtml += '<li class="disabled"><span>...</span></li>'
        }
        if (pageNum === pages) {
            ghtml += '<li class="active"><span>' + pages + '</span></li>'
        } else {
            ghtml += '<li><a href="#1" onclick="getPaginated(' + pages + ',' + pageSize + ')"> ' + pages + ' </a></li>'
        }

        if (pageNum === pages) {
            ghtml += '<li class="disabled"><span>»</span></li>'
        } else {
            ghtml += '<li><a href="#1" onclick="getPaginated(' + pages + ',' + pageSize + ')"> » </a></li>'
        }
        ghtml += '<span>共 ' + total + ' 条数据</span'
        $("#paginatedInfo").html(ghtml); // 添加数据
    }

    // 点击查询
    $("#flushed").click(function () {
        getUserPriseRecords();
    })

</script>
</body>
</html>